import { Sender, Attachments } from "@ant-design/x";
import { Flex, message, Button } from "antd";
import React, { useState, useRef } from "react";
import { CloudUploadOutlined, LinkOutlined } from "@ant-design/icons";

const Footer = () => {
  const [value, setValue] = useState("");
  const [loading, setLoading] = useState(false);

  const [fullScreenDrop, setFullScreenDrop] = React.useState(false);
  const divRef = useRef(null);
  // Mock send message
  React.useEffect(() => {
    if (loading) {
      const timer = setTimeout(() => {
        setLoading(false);
        message.success("Send message successfully!");
      }, 3000);
      return () => {
        clearTimeout(timer);
      };
    }
  }, [loading]);

  return (
    <Flex vertical gap="middle">
      <Sender
        className="bg-lime-50 border-r-8 border-orange-300"
        loading={loading}
        value={value}
        prefix={
          <Attachments
            beforeUpload={() => false}
            onChange={({ file }) => {
              message.info(`Mock upload: ${file.name}`);
            }}
            getDropContainer={() =>
              fullScreenDrop ? document.body : divRef.current
            }
            placeholder={{
              icon: <CloudUploadOutlined />,
              title: "Drag & Drop files here",
              description:
                "Support file type: image, video, audio, document, etc.",
            }}
          >
            <Button type="text" icon={<LinkOutlined />} />
          </Attachments>
        }
        onChange={(v) => {
          console.log(v,'发送的内容')
          setValue(v);
        }}
        onSubmit={() => {
          setValue("");
          setLoading(true);
          message.info("Send message!");
        }}
        onCancel={() => {
          setLoading(false);
          message.error("Cancel sending!");
        }}
        autoSize={{ minRows: 2, maxRows: 6 }}
      />
    </Flex>
  );
};
export default Footer;
